<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    h3 {
        height: 500px;
    }
</style>


<body>
    <!-- 搜索框input事件----使用节流方案（间隔一段时间就必须查询相关内容）
    或者实现输入间隔大于某个值（如500ms）当用户输入完成后然后开始搜索
    -->
    <h3>哈哈哈</h3>
    <h3>哈哈哈</h3>
    <h3>哈哈哈</h3>
    <h3>哈哈哈</h3>
    <h3>哈哈哈</h3>
    <h3>哈哈哈</h3>
    <script>

        function throttle(fn,delay){
            var vaild = true;
            return function(){
                if(!vaild){
                    return false;
                }
                vaild = false;
                setTimeout(function(){
                    fn();
                    vaild = true;
                },delay)
            }
        }
        window.onscroll =  throttle(scrollHandle,2000)
        function scrollHandle() {
            var scrollTop = document.documentElement.scrollTop;
            console.log(scrollTop);
        }


    </script>
</body>

</html>